<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
</head>
<style>
    /* 内部优先级高于内嵌 */
    #bg{
        width: 200px;height: 200px;background-color: yellow;
    }

    .bgstyle{
        width: 200px;height: 200px;
        background-color: blue;
    }

    body > div{
        width: 200px;height: 200px;
        background-color: pink;
    }

    /* 
        style : 优先级别是最低的,最后执行
        #id选择器 ：比style高一点
        Class选择器 ： 比id选择器要高一点
        层级选择器  : 最先执行.
     */
</style>
<body>
    
    <h1>style id  class的优先级别</h1>
    <div class="bgstyle" id="bg" style="background-color: red"></div>

    <h1>id  class的优先级别</h1>
    <div class="bgstyle" id="bg"></div>


    <h1>class 层级 的优先级别</h1>
    <div class="bgstyle"></div>

</body>
</html>